<template>
  <div class="container">
    <item v-for="item in more" :key="item.index" :item="item"></item>
  </div>
</template>

<script>
import item from "./components";

export default {
  data() {
    return {
      more: [],
    };
  },
  components: { item },
  mounted() {
    var { m } = this.$route.params;
    if (m == "top250") {
      this.$http("http://47.108.197.28:4000/api/movie/top250").then((res) => {
        this.more = res.data.res;
        this.more.forEach((item) => {
          item.star = this.handleNum(item.rating);
        });
      });
    } else if (m == "inTheaters") {
      this.$http("http://47.108.197.28:4000/api/movie/inTheaters").then(
        (res) => {
          this.more = res.data.res.slice(0,7);
          this.more.forEach((item) => {
            item.star = this.handleNum(item.raiting);
          });
        }
      );
    } else if (m == "comingSoon") {
      this.$http("http://47.108.197.28:4000/api/movie/comingSoon").then(
        (res) => {
          this.more = res.data.res;
          this.more.forEach((item) => {
            item.star = this.handleNum(item.rating);
          });
        }
      );
    }
  },
  methods: {
    handleNum(num) {
      var arr = [];
      for (var i = 0; i < 5; i++) {
        if (num >= 2) {
          arr.push(2);
        } else if (num > 0) {
          arr.push(Number(num.toFixed(1)));
        } else {
          arr.push(0);
        }
        num -= 2;
      }
      return arr;
    },
  },
};
</script>

<style scoped>
.container {
  width: 10rem;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>